<template>
  <el-col :span="formspan" v-if="visible">
    <el-form-item :prop="prop" :label="label" :span="itemspan">
      <template v-if="$myProps.createScopeTemplate">
        <span
          v-for="(template, index) in $myProps.createScopeTemplate(value)"
          :key="index"
          :class="template.class || 'listitem'"
        >
          <general
            v-if="template.hasOwnProperty('componentName')"
            v-bind="inheritProps(template)"
            :component-name="template.componentName"
            v-on="inheritListeners(template)"
          ></general>
        </span>
      </template>
      <component
        v-else
        :is="$myProps.componentName"
        v-bind="$myProps"
        v-on="$myListeners"
      ></component>
    </el-form-item>
  </el-col>
</template>

<script>
export default {
  components: {
    general: () => import("@/components/general/index"),
    formCascader: () => import("@/components/form/cascader"),
    formCheckbox: () => import("@/components/form/checkbox"),
    formCheckboxGroup: () => import("@/components/form/checkboxGroup"),
    formColorPicker: () => import("@/components/form/colorPicker"),
    formDatePicker: () => import("@/components/form/datePicker"),
    formEditor: () => import("@/components/form/editor"),
    formHidden: () => import("@/components/form/hidden"),
    formInput: () => import("@/components/form/input"),
    formInputNumber: () => import("@/components/form/inputNumber"),
    formPassword: () => import("@/components/form/password"),
    formRadioGroup: () => import("@/components/form/radioGroup"),
    formRadio: () => import("@/components/form/radio"),
    formSelect: () => import("@/components/form/select"),
    formSteps: () => import("@/components/form/steps"),
    formSwitch: () => import("@/components/form/switch"),
    formTransfer: () => import("@/components/form/transfer"),
    formTag: () => import("@/components/form/tag"),
    formSlider: () => import("@/components/form/slider"),
    formUpload: () => import("@/components/form/upload"),
    formIcon: () => import("@/components/form/icon"),
  },
  model: {
    // 双向绑定
    prop: "value",
    event: "input",
  },
  props: {
    value: [String, Number, Object, Array, Boolean, Date],
    prop: String,
    label: String,
    visible: {
      type: Boolean,
      default: true,
    },
    // 行列 24等分
    formspan: {
      type: Number,
      default: 24,
    },
    // 24等分
    itemspan: {
      type: Number,
      default: 24,
    },
  },
  data() {
    return {};
  },
  computed: {
    $myProps() {
      let prop = this.$public.inheritProps(this);
      if (!prop.size) {
        prop.size = "small";
      }
      return prop;
    },
    $myListeners() {
      return this.$public.inheritListeners(this);
    },
  },
  methods: {
    // 继承转换属性
    inheritProps(template) {
      let cloneTemplate = {};
      Object.assign(cloneTemplate, template);

      let componentName = cloneTemplate.componentName;

      switch (componentName.toKebabCase()) {
        case "button-input":
          cloneTemplate.noText =
            Object.prototype.toString.call(cloneTemplate.noText) ==
            "[object Boolean]"
              ? cloneTemplate.noText
              : true;
          delete cloneTemplate.visible;
          break;
      }

      delete cloneTemplate.componentName;
      delete cloneTemplate.visible;

      return cloneTemplate;
    },
    // 继承转换事件
    inheritListeners(template) {
      let listeners = this.$public.inheritListeners({
        $attrs: template,
        $listeners: {},
      });

      Object.keys(listeners).forEach((event) => {
        let tempAction = listeners[event];

        let origin = [];

        listeners[event] = function () {
          tempAction.apply(null, origin.concat(Array.from(arguments)));
        };
      });

      return listeners;
    },
  },
  watch: {
    visible: {
      handler(newVal) {
        // console.log(newVal)
      },
    },
  },
};
</script>

<style>
/* 防止变短 */

/* .el-select {
        display: block !important;
    }

    .el-date-editor.el-input,
    .el-date-editor.el-input__inner {
        width: 100%;
    }

    el-date-editor.el-input,
    .el-date-editor.el-input__inner {
        width: 100% !important;
    } */
/* 滚动条显示  以及最大高度 */

/* .el-scrollbar__wrap {
        overflow: auto;
        max-height: 240px;
    } */
/* 下拉框地板间距样式 */

/* .el-popper[x-placement^="bottom"] {
        padding-bottom: 5px;
    } */
</style>
